<template>
<div class="pageHome">
  <div style="height: 3rem;">
  </div>
  <!-- toast -->
  <div id="toastHome" style="display: none;">
  <div class="weui-mask_transparent"></div>
  <div class="weui-toast">
      <p class="weui-toast__content" style="color: white;">请选择分类</p>
  </div>
  </div>
  <!-- <div class="logo"> -->
    <!-- <img src="../../static/logoW.png" alt=""> -->
    <!-- <p>亲子公号查找</p>
  </div> -->
  <!-- <div class="line"></div> -->
  <div class="content">
  <div class="guide">
    请选择阶段
  </div>
  <div class="interestBox">
    <div class="row">
      <div class="age op" id="1">待产</div>
      <div class="age op" id="2">0-1岁</div>
      <div class="age op" id="3">2-3岁</div>
      <div class="age op" id="4">3-5岁</div>
      <div class="age op" id="5">6岁+</div>
    </div>
    <div class="guide">
      请选择分类
    </div>
    <div class="row">
      <div class="classfiy op" id="6">综合</div>
      <div class="classfiy op" id="7">辅食</div>
      <div class="classfiy op" id="8">教育</div>
    </div>
    <div class="row">
      <div class="classfiy op" id="9">护理</div>
      <div class="classfiy op" id="10">绘本</div>
      <div class="classfiy op" id="11">亲子关系</div>
    </div>
    <div class="row">
      <!-- <div class="classfiy op" id="10">个人号</div> -->
      <!-- <div class="classfiy op" id="11">服务号</div> -->
      <!-- <div class="classfiy op" id="12">辣妈奶爸</div> -->
      <!-- <div class="classfiy" style="opacity: 0.4">个人号</div>
      <div class="classfiy" style="opacity: 0.4">服务号</div>
      <div class="classfiy" style="opacity: 0.4">敬请期待</div> -->
    </div>
  </div>
  <div class="placeHolder">
  </div>
  <!-- <div class="line"></div> -->
  <div class="action confirm">
    <div style="color: white" v-on:click="confirm" class="actionBtn">确认</div>
    <!-- <div class="actionBtn" id="random">随便看看</div> -->
  </div>
  </div>
  <div class="tip">
    <p>长按关注万物增长</p>
    <img src="../../static/qrcode_for_gh_ad3c85cf84ab_430.jpg" alt="">
  </div>
</div>
</template>

<script>
// import wx from 'weixin-js-sdk';
import $ from 'jquery';
import {track} from '../statistics/mongo';

export default {
  data() {
    console.log('data');
    return {};
  },
  /**
   * created
   */
  created() {
    console.log('homeCreated');
    // console.log('wx', wx);
    // 初始化用户信息
    // User.initAccessInfo();
    const user = JSON.parse(window.localStorage.getItem('ict48-user-info'));
    console.log('获取到了用户信息', user)
  },
  route: {
    data() {}
  },
  /**
   * beforeDestroy
   */
  beforeDestroy() {
  },
  /**
   * mounted
   */
  mounted() {
    // console.log('homeMounted');
    // console.log('height', document.body.scrollWidth);
    localStorage.removeItem('menuTitle');
    // 点击btn选择年龄
    // 点击btn选择类别
    let clickBtn = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    for (let i = 0; i < clickBtn.length; i++) {
      $('#' + clickBtn[i]).click(() =>
        $('#' + clickBtn[i]).toggleClass('op')
      );
    }
    // 随机btn
    $('#random').click(function() {
      // 年龄随机
      let chooseAge = [1, 2, 3, 4, 5];
      for (let i = 0; i < chooseAge.length; i++) {
        $('#' + chooseAge[i]).addClass('op');
      }
      chooseAge.sort(() => 0.5 - Math.random());
      chooseAge.splice(0, 4);
      for (let i = 0; i < chooseAge.length; i++) {
        $('#' + chooseAge[i]).removeClass('op');
      }
      // 类别随机
      let chooseType = [6, 7, 8, 9, 10, 11];
      for (let i = 0; i < chooseType.length; i++) {
        $('#' + chooseType[i]).addClass('op');
      }
      chooseType.sort(() => 0.5 - Math.random());
      chooseType.splice(0, 3);
      console.log(chooseType);
      // statisics 随机统计
      track('click_random', {randomType: chooseType});
      for (let i = 0; i < chooseType.length; i++) {
        $('#' + chooseType[i]).removeClass('op');
      }
    });
    // init 初始化
    if (localStorage.getItem('choose')) {
      for (let i = 0; i < localStorage.getItem('choose').split(',').length; i++) {
        $('#' + localStorage.getItem('choose').split(',')[i]).removeClass('op');
      }
      // $('actionBtn').click();
      // return;
    } else {
      // $('#random').click();
      // 初始类别随机
      let chooseType = [6, 7, 8, 9, 10, 11];
      for (let i = 0; i < chooseType.length; i++) {
        $('#' + chooseType[i]).addClass('op');
      }
      chooseType.sort(() => 0.5 - Math.random());
      chooseType.splice(0, 3);
      console.log(chooseType);
      for (let i = 0; i < chooseType.length; i++) {
        $('#' + chooseType[i]).removeClass('op');
      }
    }
    // confirm
    let confirmBtn = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    let arr = [];
    for (let i = 0; i < confirmBtn.length; i++) {
      if ($('#' + confirmBtn[i]).css('opacity') === '1') {
        arr.push(confirmBtn[i]);
      }
    }
    console.log(arr);
  },

  methods: {
    // confirm
    confirm() {
      let confirmBtn = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
      let arr = [];
      for (let i = 0; i < confirmBtn.length; i++) {
        if ($('#' + confirmBtn[i]).css('opacity') === '1') {
          arr.push(confirmBtn[i]);
        }
      }

      localStorage.setItem('choose', arr);
      // statisics 确认及选择类型统计
      track('click_confirm', {chooseType: arr});

      // 请选择类型
      if (arr.length === 0) {
        $('#toastHome').show(0);
        $('#toastHome').fadeOut(1500);
        return;
      } else {
        // this.$router.push('/publicList');
        console.log(arr);
        $('#home').hide();
        location.reload();
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.toastHome {
  // z-index: 998;
}
.weui-toast {
  height: 7.6em;
  line-height: 7.6rem;
}
.placeHolder {
    background-color: #f7bbba;
    height: 0rem;
}
.op {
    opacity: 0.4;
}
.pageHome {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    padding-bottom: 3rem;
    z-index: 995;
    background-color: white;
    // background-color: #ffe8ee;
    // background-color: #f7bbba;
    // background-color: #FBAC3B;
    p,
    span {
        font-family: Helvetica Neue,Tahoma,Arial;
    }
}
.content {
  border-style: solid;
  border-color: #efeff4;
  border-width: 1px;
  margin: 0.7rem;
}
.line {
    opacity: 0.5;
    height: 1rem;
    margin: 0 1.2rem;
    border-top-color: #dc8fa9;
    border-top-style: solid;
    border-radius: 15px;
    border-width: 1px;
    margin-top: 1rem;
}
.logo {
    padding-top: 1rem;
    p {
        color: #dc8fa9;
    }
    img {
        width: 5rem;
    }
}
// .action {
//     display: flex;
//     position: fixed;
//     bottom: 1rem;
//     width: 100%;
//     .actionBtn {
//         flex: 1;
//         height: 5rem;
//         line-height: 5rem;
//         margin: 1rem 1.5rem;
//         background-color: white;
//         font-size: 16px;
//     }
// }
.confirm {
      // position: fixed;
      bottom: 1rem;
      width: 100%;
      // text-align: center;
      position: relative;
          .actionBtn {
              // background-color: rgba(236, 236, 236, 0.5);
              background-color: #c76060;
              height: 3rem;
              line-height: 3rem;
              margin: 3rem 1.5rem 0rem 1.5rem;
              font-size: 16px;
          }
}
.guide {
    // color: #dc8fa9;
    color: #b2b2b2;
    font-size: 10px;
    margin-top: 1.5rem;
}
.interestBox {
    margin: 1.2rem 1rem;
    .row {
        display: flex;
        margin: 1rem 0;
        .age {
          flex: 1;
          height: 2rem;
          line-height: 2rem;
          background-color: #c76060;
          margin: 0.5rem;
          // color: #808080;
          color: white;
          font-size: 12px;
        }
        .classfiy {
            flex: 1;
            height: 2rem;
            line-height: 2rem;
            background-color: #c76060;
            margin: 0.5rem;
            color: white;
            font-size: 12px;
            border-radius: 15px;
        }
    }
}
.tip {
    // position: fixed;
    // width: 100%;
    // bottom: 1rem;
    padding: 0.5rem;
    img {
      width: 4rem;
    }
    p {
        // color: #dc8fa9;
        color: #b2b2b2;
        font-size: 10px;
    }
}
</style>
